<template>
  <div class="app-container">
   
 <!-- @selection-change="handleSelectionChange" -->
    <el-table v-loading="loading" :data="ResearchExamList">
    
      <el-table-column label="答卷名称" align="center" prop="examname">
        <template slot-scope="scope">
          <span @click="handleopen(scope.row)" style="cursor:pointer;text-decoration:underline;color:blue;">{{ scope.row.examname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="答卷卡" align="center" prop="examname">
        <template slot-scope="scope">
          <span @click="handleopen1(scope.row)" style="cursor:pointer">{{ scope.row.examname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="是否启用" align="center" prop="invalid"/>
      <el-table-column label="题目数量" align="center" prop="examcount"/>
      <el-table-column label="出卷人" align="center" prop="userid"/>
      <el-table-column label="描述" align="center" prop="description"/>
   
    </el-table>
 
    <!--打开试卷-->
    <el-dialog :title="'调研试卷'" :visible.sync="ExamResultVisible" width="700px" :close-on-click-modal="false">
   
    <el-form ref="dev" :model="dev" label-width="80px">
      <h1 style="font-size:30px" align="center">{{dev.examname}}</h1>
      <el-button @click="cancel" style="margin-right:20px;margin-left:40px">关闭</el-button>
      <span style="margin-right:40px">出卷人：<label>{{dev.userid }}&nbsp;&nbsp;&nbsp;&nbsp;</label></span>
      <span style="margin-right:40px">共：<label>{{dev.examcount }}道题&nbsp;&nbsp;&nbsp;&nbsp;</label></span>
      <span>出题时间:<label>{{dev.oprtime}}</label></span>
      <hr color="red" width="100%">
    </el-form> 

     <el-form ref="form" :model="form"  label-width="80px">
        <!-- <el-form-item label="调研答卷名称" prop="reseachid" >
          <el-input v-model="form.reseachid" placeholder="请输入调研答卷名称" />
        </el-form-item>
        <el-form-item label="题号" prop="examid" > 
          <el-input v-model="form.examid" placeholder="请输入题号" />
        </el-form-item>
        <el-form-item label="答题结果" prop="result" >
          <el-input v-model="form.result" placeholder="请输入答题结果" />
        </el-form-item>
        <el-form-item label="做题人" prop="custid" >
          <el-input v-model="form.custid" placeholder="请输入做题人" />
        </el-form-item>
        <el-form-item label="调研人" prop="userid" >
          <el-input v-model="form.userid" />
        </el-form-item>
        <el-form-item label="答题日期" prop="oprtime" hidden>
          <el-date-picker clearable
            v-model="form.oprtime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择答题日期">
          </el-date-picker>
        </el-form-item> -->

      <el-row>
        <el-col :span="24">
          <div class="dialog-header bg-purple">
        
            <div v-for="(test,index) in examMastertList" :key="index" >
             
              <!--题目-->
              <p>{{index + 1}}.{{test.unitname}}({{test.unittype}})</p>
              <!-- <div v-for="(test1,index1) in examResultList" :key="index1" > -->
              <!--多选--> <!-- label绑定答案的值,可以绑定索引index,也可以绑定答案内容city -->
               <el-checkbox-group v-if="test.unittype == '多选题' "  v-model="form1.result"> 
                <el-checkbox
                  v-for="(item,index) in test.unitvalue.split(',')" 
                  :label="item"
                  :key="index"
                   @change="c(test.examid,item)"
                >{{item}}</el-checkbox>
              </el-checkbox-group> 
            
              <!--单选-->
              <!--test.unitvalue.split(',')-->
              <el-radio-group v-else-if="test.unittype == '单选题' " v-model="test.result">
                <el-radio
                 v-for="(item,index) in test.unitvalue.split(',')"
                  :label="item"
                  :key="index"
                  @change="a(test.examid,item)"
                >{{item}}</el-radio>
              </el-radio-group> 
            
               <!--简答-->
              <div v-else>
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="test.result"  @change="a(test.examid,$event)"></el-input>
              </div>
              
            <!-- </div> -->
            </div>
          </div>
          <br />
        </el-col>
      </el-row>

      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleopen1">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div> -->
     
    </el-dialog>

     <!--打开答题卡-->
    <el-dialog :title="'调研试卷'" :visible.sync="ExamResultVisible1" width="600px" :close-on-click-modal="false">
   
    <el-form ref="dev" :model="dev" label-width="80px">
      <h1 style="font-size:30px" align="center">{{dev.examname}}</h1>
      <el-button @click="cancel" style="margin-right:20px;margin-left:40px">关闭</el-button>
      <span style="margin-right:40px">答题人：<label>{{this.$route.query.custname}}&nbsp;&nbsp;&nbsp;&nbsp;</label></span>
      <span style="margin-right:40px">共<label>{{dev.examcount }}道题&nbsp;&nbsp;&nbsp;&nbsp;</label></span>
      <span>答题时间:<label>{{ this.form.oprtime}}</label></span>
      <hr color="red" width="100%">
    </el-form> 

     <el-form ref="form" :model="form"  label-width="80px">
       

      <el-row>
        <el-col :span="24">
          <div class="dialog-header bg-purple">
        
            <div v-for="(test,index) in examMastertList" :key="index" >
             
              <!--题目-->
              <p>{{index + 1}}.{{test.unitname}}({{test.unittype}})</p>
              <div v-for="(test1,index1) in examResultList" :key="index1" >
              <!--多选--> <!-- label绑定答案的值,可以绑定索引index,也可以绑定答案内容city -->
               <el-checkbox-group v-if="test.unittype == '多选题' && test.examid==test1.examid"  v-model="form1.result"> 
                <el-checkbox
                  v-for="(item,index) in test.unitvalue.split(',')" 
                  :label="item"
                  :key="index"
                   @change="c(test.examid,item)"
                >{{item}}</el-checkbox>
              </el-checkbox-group> 
            
              <!--单选-->
              <!--test.unitvalue.split(',')-->
              <el-radio-group v-else-if="test.unittype == '单选题' && test.examid==test1.examid" v-model="test1.result">
                <el-radio
                 v-for="(item,index) in test.unitvalue.split(',')"
                  :label="item"
                  :key="index"
                  @change="a(test.examid,item)"
                >{{item}}</el-radio>
              </el-radio-group> 
            
               <!--简答-->
              <div v-else-if="test.examid==test1.examid">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="test1.result"  @change="a(test.examid,$event)"></el-input>
              </div>
              
            </div>
            </div>
          </div>
          <br />
        </el-col>
      </el-row>

      </el-form>
     
     
    </el-dialog>
  
  </div>
</template>

<script>
import { listResearchExam, getResearchExam, delResearchExam, addResearchExam, updateResearchExam,projectinfo,listExamMaster,listExamResult,updResult,ExamResultList} from "@/api/house_sale/ResearchExam";
import { addExamresult, updateExamresult}from "@/api/house_sale/examresult";
export default {
  name: "ResearchExam",
  data() {
    return {
      updateTime:"",
      dev: {},
      examMaster: {},
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 调研答卷名称表格数据
      ResearchExamList: [],
      //项目列表
      projectlist: [],
      //试卷题目列表
      examMastertList: [],
      examResultList: [],
    
      invalids:['启用','停用'],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      ExamResultVisible: false,
      ExamResultVisible1: false,
     
      // 表单参数
      form: {},
      form1: {
        result:[]
      },
    };
  },
  created(){
    this.getList();
  },
  methods: {
    /** 查询调研答卷名称列表 */
    //单选题，简答题
    a(id,value){
      console.log("id="+id+"value="+value);
      this.form.examid=id;
      this.form.result=value;
     

      //修改result
      listExamResult(id, this.form.custid).then(response =>{
        if(response.examresult==null){
            //去新增
          addExamresult(this.form).then(response =>{
        // this.$modal.msgSuccess("新增成功");
          })
        }else{
          // console.log("form="+this.form.resultid)
            //去修改
          this.form.resultid=response.resultid
          updateExamresult(this.form).then(response =>{
        // this.$modal.msgSuccess("修改成功");
          })
        }
      
      })
      updResult(id,value).then(response => {
        //  this.$modal.msgSuccess("交卷成功");
      })

    },
    //多选题
    c(id,e){
      console.log("id2="+id+"value2="+e);
       this.form.examid=id;
       this.form.result=e;
     

      //修改result
      listExamResult(id, this.form.custid).then(response =>{
        if(response.examresult==null){
            //去新增
          addExamresult(this.form).then(response =>{
        //this.$modal.msgSuccess("新增成功");
          })
        }else{
          // console.log("form="+this.form.resultid)
            //去修改
          this.form.resultid=response.resultid
          updateExamresult(this.form).then(response =>{
       // this.$modal.msgSuccess("修改成功");
          })
        }
      
      })
      updResult(id,e).then(response => {
        // this.$modal.msgSuccess("交卷成功");
      })

    },
    // c(id,value){
    //   console.log("id="+id+"value="+value);
    //  },
     //获取当前时间
    addDate(){
      const nowDate = new Date();
        const date = {
            year: nowDate.getFullYear(),
            month: nowDate.getMonth() + 1,
            date: nowDate.getDate(),
        }
        const newmonth = date.month>10?date.month:'0'+date.month
        const day = date.date>10?date.date:'0'+date.date
        this.updateTime = date.year + '-' + newmonth + '-' + day
    
    },
    getList() {
      this.loading = true;
      listResearchExam(this.queryParams).then(response => {
        this.ResearchExamList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      // projectinfo().then(response => {
      //   this.projectlist = response.projectList;
      // });
    },
     // 取消按钮
    cancel() {
      this.open = false;
      this.ExamResultVisible = false;
      this.reset();
    },
      // 表单重置
    reset() {
      this.form = {
        resultid: null,
        reseachid: null,
        examid: null,
        result: null,
        custid: null,
        userid: null,
        oprtime: null
      };
      this.resetForm("form");
    },
    /*打开试卷按钮 */
    handleopen(row) {
      this.reset();
      this.addDate();

      if(row!=null){
      const reseachid = row.reseachid

      this.form.reseachid = row.reseachid
      this.form.custid = this.$route.params.custid
      this.form.userid = row.userid
      this.form.oprtime= this.updateTime
      
       listExamMaster(reseachid).then(response => {
           this.examMastertList = response.examMastertList;
           this.dev = response.researchExam;
           this.ExamResultVisible = true;
        
        //  console.log("researchExam="+response.researchExam);
       })
      ExamResultList(this.form.reseachid,this.form.custid).then(response => {
           this.examResultList = response.examResultList;
        
       })
      }
    },
    /**打开答题卡按钮 */
     handleopen1(row) {
      this.reset();
      this.addDate();

      if(row!=null){
      const reseachid = row.reseachid

      this.form.reseachid = row.reseachid
      this.form.custid = this.$route.params.custid
      this.form.userid = row.userid
      this.form.oprtime= this.updateTime
      
       listExamMaster(reseachid).then(response => {
           this.examMastertList = response.examMastertList;
           this.dev = response.researchExam;
           this.ExamResultVisible1 = true;
        
        //  console.log("researchExam="+response.researchExam);
       })
      ExamResultList(this.form.reseachid,this.form.custid).then(response => {
           this.examResultList = response.examResultList;
        
       })
      }
    },
   /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.resultid != null) {
            updateExamresult(this.form).then(response => {
              this.$modal.msgSuccess("交卷成功");
              this.open = false;
              this.getList();
            });
          } else {
            addExamresult(this.form).then(response => {
              this.$modal.msgSuccess("交卷成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  
  
  }
};
</script>
